<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Reading KML Files with Google Maps JavaScript API Version 3</title>
<style type="text/css">
html, body, #map_canvas {
	width:   100%;
	height:  480px;
	margin:  0;
	padding: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js">
</script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript">
var geoXml = null;
var map = null;
var myLatLng = null;
            jQuery(document).ready(function(){
                // jQuery('#map_text').append("Hello");
                // var myLatlng = new google.maps.LatLng(39.397, -100.644);

                // var latlng = new google.maps.LatLng(44.797012, 7.382345);
                // googleplex 37.422104808,-122.0838851 zoom = 18
                myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
                var myOptions = {
                    zoom: 18,
                    center: new google.maps.LatLng(37.422104808,-122.0838851),
                    // zoom: 5,
                    // center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                
                geoXml = new geoXML3.parser({
                    map: map,
                    singleInfoWindow: true,
                    // zoom: false,
                    afterParse: useTheData
                });
                geoXml.parse('geom.kml');
            });

            
            function useTheData(doc){
                // Geodata handling goes here, using JSON properties of the doc object
                // map.fitBounds(geoXml.doc[0].bounds);
                // alert("doc[0].bounds = "+doc[0].bounds);
                // map.setCenter(myLatLng);
                // map.setZoom(18);
                for (var i = 0; i < doc[0].markers.length; i++) {
                    // console.log(doc[0].markers[i].title);
                    jQuery('#map_text').append(doc[0].markers[i].title + ', ');
                }
            };

   function hide_markers_kml(){
            geoXml.hideDocument();  // see geoxml3-modify: http://geocontext.org/pliki/2010/test-geoxml3/test2/geoxml3-modify.js
   }
   function unhide_markers_kml(){
            geoXml.showDocument();  // see geoxml3-modify: http://geocontext.org/pliki/2010/test-geoxml3/test2/geoxml3-modify.js
   }
        </script>
    </head>
    <body>
        <h4>Reading a <a href="http://code.google.com/intl/it-IT/apis/kml/documentation/">KML</a> file with Google Maps JavaScript API <a href="http://code.google.com/intl/it-IT/apis/maps/documentation/v3/">Version 3</a> and <a href="http://code.google.com/p/geoxml3/">geoxml3</a>.</h4>
  <button onclick="hide_markers_kml();">hide</button>
  <button onclick="unhide_markers_kml();">unhide</button>
  <button onclick="map.setCenter(myLatLng); map.setZoom(18);">google</button>
  <button onclick="map.setCenter(new google.maps.LatLng(38.870832443487,-77.05580139178142));map.setZoom(16);">pentagon</button>
  <button onclick="map.setCenter(new google.maps.LatLng(36.10860519,-112.249061));map.setZoom(12);">Grand Canyon</button>
  <button onclick="map.setCenter(new google.maps.LatLng(37.688011,14.9915465449));map.setZoom(10);">Mt. Etna</button>
        <div id="map_canvas">
        </div>
        <div id="map_text">
        </div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script> 
    </body>
</html>
